<template>
	<div>
		<UPLOAD v-if="upload" style="margin-left:5rem;">

		</UPLOAD>
		<div class="bgimg" v-if="show">
			<el-container>
				<el-main>
					<el-row style="padding-top:30px">
						<el-col :span="8">
							<div class="demo-image__preview grid-content">
								<el-image style="width: 180px; height: 210px" :src="url" :preview-src-list="srcList">
								</el-image>
							</div>
						</el-col>
						<el-col :span="16">
							<div class="grid-content">
								<el-row>
									姓名:{{this.student.name}}
								</el-row>
								<el-row>
									性别:{{this.student.sex}}
								</el-row>
								<el-row>
									学号:{{this.student.studentNumber}}
								</el-row>
								<el-row>
									年级:{{this.student.grade}}
								</el-row>
								<el-row>
									专业:{{this.student.profession}}
								</el-row>
							</div>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							&nbsp;
						</el-col>
						<el-col :span="1.9">
							<el-avatar :size="40" :src="src">
							</el-avatar>
						</el-col>
						<el-col :span="12" class="school">
							{{this.student.school}}
						</el-col>
					</el-row>
				</el-main>
			</el-container>
		</div>
	</div>
</template>

<script>
	import UPLOAD from "./upload.vue";
	import userDataMixin from '../../mixin/userDataMixin'
	export default {
		mixins: [userDataMixin],
		components: {
			UPLOAD
		},
		data() {
			return {
				src: "http://120.79.136.233:9898/queryCollegePictureById/" + localStorage.getItem("userId"),
				url: "http://120.79.136.233:9898/queryStudentUserHeadPortraitById/" + localStorage.getItem("userId"),
				srcList: [
					"http://120.79.136.233:9898/queryStudentUserHeadPortraitById/" + localStorage.getItem("userId")
				],
				upload: true,
				show: false
			}
		},
		watch: {
			student: {
				deep: true,
				handler(nV, oV) {
					this.upload = false;
					this.show = true;
				},
			}
		}
	}
</script>

<style scoped>
	.bgimg {
		background-image: url(../../assets/indexbg.png);
		height: 344px;
		width: 613px;
	}

	.school {
		margin-top: 1px;
		margin-right: 1px;
		font-size: 25px;
	}

	.el-row {
		margin-bottom: 20px;

	}

	.el-col {
		border-radius: 4px;
	}


	.grid-content {
		border-radius: 4px;
		min-height: 36px;
		font-size: 20px;
		margin-left: 10px;
		font-weight: 600;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
